<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="store">
        <div class="store__nav">
            <div class="store__nav__logo">
                <img src="img/shopping.png" alt="">
            </div>
            <div class="store__nav__list">
                <ul class="list">
                    <li class="list__item">首页</li>
                    <li class="list__item">商品分类</li>
                    <li class="list__item">订单中心</li>
                    <li class="list__item">购物车</li>
                    <li class="list__item">个人中心</li>
                </ul>
            </div>
            <div class="store__nav__login">
                <button class="login button--primary">登录</button>
                <button class="register button--primary">注册</button>
            </div>
        </div>
        <div class="store-search">
            <div class="search-box">
                <div class="search-box--input">
                   <img src="img/search.png" alt="">
                   <input type="text" class="search-input" placeholder="搜索商品">
                   <button class="search-button">搜索</button>
                </div>
                <p class="search-hot">
                    热门搜索:
                    <a href="#">智能手机</a>
                    <a href="#">笔记本电脑</a>
                    <a href="#">运动鞋</a>
                    <a href="#">护肤套装</a>
                </p>
            </div>
        </div>
        <div class="store-category">
            <div class="category-title">
                <ul class="category-list">
                    <li class="list-item">全部分类</li>
                    <li class="list-item">服装</li>
                    <li class="list-item">数码</li>
                    <li class="list-item">家居</li>
                    <li class="list-item">美妆</li>
                    <li class="list-item">食品</li>
                    <li class="list-item">母婴</li>
                    <li class="list-item">运动</li>
                </ul>
            </div>
            <div class="category-content">
                <div class="content-banner">
                    <img src="img/banner.png" alt="">
                </div>
                <div class="content-goods">
                    <p>特色商品推荐</p>
                    <div class="goodsdisplay">
                        <div class="goodsitem">
                            <img src="img/ear.png" alt="">
                            <p>高端无线耳机</p>
                            <div class="price">
                            <p>¥1299</p>
                            </div>
                        </div>
                        <div class="goodsitem">
                            <img src="img/watch.png" alt="">
                            <p>智能手表</p>
                            <div class="price">
                            <p>¥899</p>
                            </div>
                        </div>
                        <div class="goodsitem">
                            <img src="img/poket.png" alt="">
                            <p>真皮钱包</p>
                            <div class="price">
                            <p>¥399</p>
                            </div>
                        </div>
                        <div class="goodsitem">
                            <img src="img/bag.png" alt="">
                            <p>时尚双肩包</p>
                            <div class="price">
                            <p>¥599</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sale">
                    <div class="sale-title">
                        <p class="sale-title__text">限时秒杀</p>
                        <div class="restTime">
                            <span class="restTime__text">距结束还剩：</span>
                            <span class="number">02</span>
                            <span>:</span>
                            <span class="number">45</span>
                            <span>:</span>
                            <span class="number">30</span>
                        </div>
                    </div>
                    <div class="sale-content">
                        <div class="sale-content-item">
                            <img src="img/1.png" alt="">
                            <p class="presentprice">¥2999</p>
                            <p class="pastprice">¥3999</p>
                        </div>
                        <div class="sale-content-item">
                            <img src="img/2.png" alt="">
                            <p class="presentprice">¥499</p>
                            <p class="pastprice">¥699</p>
                        </div>
                        <div class="sale-content-item">
                            <img src="img/3.png" alt="">
                            <p class="presentprice">¥299</p>
                            <p class="pastprice">¥499</p>
                        </div>
                        <div class="sale-content-item">
                            <img src="img/4.png" alt="">
                            <p class="presentprice">¥199</p>
                            <p class="pastprice">¥299</p>
                        </div>
                        <div class="sale-content-item">
                            <img src="img/5.png" alt="">
                            <p class="presentprice">¥159</p>
                            <p class="pastprice">¥259</p>
                        </div>
                        <div class="sale-content-item">
                            <img src="img/6.png" alt="">
                            <p class="presentprice">¥99</p>
                            <p class="pastprice">¥199</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="store-foot">
            <div class="foot-text">
                <div class="foot-text-front">
                    <div class="front-content">
                        <p>关于我们</p>
                        <ul>
                            <li>公司介绍</li>
                            <li>招贤纳士</li>
                            <li>联系我们</li>
                        </ul>
                    </div>
                    <div class="front-content">
                        <p>帮助中心</p>
                        <ul>
                            <li>购物指南</li>
                            <li>支付方式</li>
                            <li>配送说明</li>
                        </ul>
                    </div>
                    <div class="front-content">
                        <p>售后服务</p>
                        <ul>
                            <li>退货政策</li>
                            <li>退货流程</li>
                            <li>售后政策</li>
                        </ul>
                    </div>
                    <div class="front-content">
                        <p class="line">客服热线</p>
                        <p class="telephone">400-123-4567</p>
                        <p class="time">周一至周日 9:00-22:00</p>
                    </div>
                </div>
                <div class="foot-text-bottom">
                    <p>© 2024 logo商城. 保留所有权利. ICP备案号：京ICP备12345678号-1</p>
                </div>
            </div>
            <div class="foot-side">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>